import React from 'react'
import { changeNav,getInfoList } from '../actions'
import { connect } from 'react-redux'
import { WhiteSpace,Card,WingBlank } from 'antd-mobile';
import NullList from './../components/nullList.js'
class MsgDetail extends React.Component {
	componentDidMount(){
		if( this.props.params.type === "openbiz"){
	    	this.props.tochangeNav({title:"业务开通消息"})
	    	this.props.getInfoList({ notifyType:1,notifyStatus:2 })
	    }
	    if( this.props.params.type === "sysinfo"){
	    	this.props.tochangeNav({title:"系统通知消息"})
	    	this.props.getInfoList({ notifyType:2,notifyStatus:2 })
	    }
	}

	render(){
		const { params,allMsg } = this.props
		const timeoutstyle = {
			textAlign:"center"
		}
		const timestyle = {
			margin:"0 auto",
			background:"#ccc",
			display:"inline-block",
			padding:"8px"
		}

		return (
			<div>
				{allMsg.msglist.length>0?
					allMsg.msglist.map( ( item,i ) => {
						return(
							<div key={i}>
								<WhiteSpace size="lg" />
								<div style={ timeoutstyle }>
									<div style={ timestyle }>{item.notifyTime}</div>
								</div>
								<WhiteSpace size="lg" />
								<WingBlank size="lg">
									<Card>
								      <Card.Header
								        title={ item.notifyTitle }
								        thumb={ item.notifyLogo }
								      />
								      <Card.Body>
								        <div>{ item.notifyContent }</div>
								      </Card.Body>

								    </Card>
							    </WingBlank>
							</div>

						)
					} ): <NullList imgsrc={require('./png/icon_xx_wuxiaoxi.png')} text1='暂时没有待办项'></NullList>
				}
				<WhiteSpace size="lg" />
			</div>

		)


	}
}

const mapStateToProps = ( state ) => ({
	allMsg:state.allMsg
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	getInfoList:data => dispatch( getInfoList(data) )
})

export default connect( mapStateToProps,mapDispatchToProps )( MsgDetail )